<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="tianqiyubao" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('tianqiyubao'));
        //加载读取动画
        myChart.showLoading();
        // 指定图表的配置项和数
        var xAxisDataJson = [];
        var seriesJsonLow = [];
        var seriesJsonhigh = [];
        //获取json数据并赋值给图表插件
        $.getJSON('http://wthrcdn.etouch.cn/weather_mini?city=%E9%9D%92%E5%B2%9B', function(data){
        	//遍历json需要的元素
        	$.each(data.data.forecast, function(index,element){
        		//console.log(element.date);
        		xAxisDataJson.push(element.date);
        		seriesJsonLow.push(element.low);
        		seriesJsonhigh.push(element.high);
        	});
        	//无聊的转换
        	var lowarrtostr = seriesJsonLow.join('*');
        	//只去温度的数字信息
        	var diwendu = lowarrtostr.match(/\d+/g); 
        	//无聊的转换
        	var higharrtostr = seriesJsonhigh.join('*');
        	//只去温度的数字信息
        	var gaowendu = higharrtostr.match(/\d+/g);
        	//图表显示信息
			myChart.setOption({
				title:{
					text:'青岛未来五天温度图'
				},
				tooltip: {},
				legend: {
					data:["最高气温","最低气温"]
				},
				toolbox: {
					show: true,
					feature: {
						dataZoom: {
				    	yAxisIndex: 'none'
						},
						dataView: {readOnly: false},
						magicType: {type: ['line', 'bar']},
						restore: {},
						saveAsImage: {}
					}
				},
				xAxis: {
					data:xAxisDataJson,
					name:'日期'
				},
				yAxis: {
					name:'摄氏度'
				},
				series: [{
					name: '最高气温',
					type: 'line',
					data: gaowendu
				},
				{
					name: '最低气温',
					type: 'line',
					data: diwendu
				}]
			});

		});
    		
        // 数据加载完成隐藏图表加载动画
        myChart.hideLoading();
    </script>
</body>
</html>